<template>
  <div>
    <el-dialog
      title="角色列表"
      :visible="roleDialogVisitable"
      @close="closeDialog"
      center
      width="70%"
    >
      <div>
        <el-row>
          <div>
            <el-form :inline="true" :model="formInline" label-width="100px">

              <el-form-item label="查询条件">
                <el-select style="width: 200px" v-model="formInline.productId" placeholder="所属系统">
                  <el-option
                    v-for="item in validSysOptions"
                    :key="item.sysKey"
                    :label="item.sysName"
                    :value="item.sysKey">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-input placeholder="角色名称" v-model="formInline.roleName" @keyup.enter="searchRole"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-input placeholder="角色编码" v-model="formInline.roleCode" @keyup.enter="searchRole"
                          clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchRole">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table
            ref="multipleTable"
            :data="roleList"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            >
            </el-table-column>

            <el-table-column
              prop="roleName"
              label="角色名称"
            ></el-table-column>

            <el-table-column
              prop="roleCode"
              label="角色CODE"
            >
            </el-table-column>

          </el-table>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer" center>
        <el-button @click="roleDialogVisitable = false">取 消</el-button>
        <el-button type="primary" v-on:click="choseRole">选 取</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "ChoseRole",
    data: function () {
      return {
        formInline: {
          roleName: '',
          roleCode: '',
          productId: ''
        },
        roleList: [
          {
            roleCode:'general-manager',
            roleName:'总经理'
          },
          {
            roleCode:'normal',
            roleName:'普通用户'
          }
        ],
        validSysOptions: [
          {
            sysKey: '102',
            sysName: '外星探测系统'
          }
        ],
        roleDialogVisitable: false,
        selectedRoleList: []
      }
    },
    methods: {
      changeVisiable: function () {
        this.roleDialogVisitable = !this.roleDialogVisitable
      },
      closeDialog: function () {
        this.roleDialogVisitable = false
      },
      searchRole: function () {
        this.$message('自行实现');
      },
      choseRole: function () {
        if (this.selectedRoleList.length === 0) {
          this.$message('请选择角色');
          return;

        }
        //回调父组件接口
        this.$emit('role-choice', this.selectedRoleList);

        //关闭modal
        this.changeVisiable();
      },
      handleSelectionChange: function (val) {
        this.selectedRoleList = val;
      }
    }
  }
</script>

<style scoped>

</style>
